<template>
  <div class="container-fluid">
    <div class="row cs-background-color">
      <div class="col-2">
        <div class="cs-height-vh-10">
          <a href="#" class="cs-inline-block cs-height-fill">
            <img class="cs-height-fill" src="../assets/logo.svg" alt="" />
          </a>
        </div>
      </div>
      <div class="col-8 cs-flex-inner-center">
        <ul class="cs-row-parent">
          <li class="cs-row-child">
            <a
              class="cs-link cs-font-white"
              :class="{ 'cs-active': $router.currentRoute.value.path == '/image' }"
              @click="navJump('/image')"
              >图片</a
            >
          </li>
          <li class="cs-row-child">
            <a
              class="cs-link cs-font-white"
              :class="{ 'cs-active': $router.currentRoute.value.path == '/photographer' }"
              @click="navJump('/photographer')"
              >摄影师</a
            >
          </li>
          <li class="cs-row-child">
            <a
              class="cs-link cs-font-white"
              :class="{ 'cs-active': $router.currentRoute.value.path == '/help' }"
              @click="navJump('/help')"
              >服务</a
            >
          </li>
        </ul>
      </div>
      <div class="col-2 cs-flex-inner-center">
        <ul class="cs-row-parent">
          <li class="cs-row-child">
            <a class="cs-link cs-font-white" href="#">购买</a>
          </li>
          <li class="cs-row-child">
            <a class="cs-link cs-font-white" href="#">注册</a>
          </li>
          <li class="cs-row-child">
            <a
              class="cs-link cs-font-white"
              data-bs-toggle="modal"
              data-bs-target="#login"
              >登录</a
            >
          </li>
        </ul>
      </div>
    </div>
    <div class="row">
      <router-view :key="$router.path"></router-view>
    </div>
  </div>

  <!-- login -->
  <CsModal :data="modal_data">
    <template v-slot:body>
      <div class="input-group mb-3">
        <span class="input-group-text">用户名</span>
        <input type="text" v-model="login_info.username" class="form-control" />
      </div>
      <div class="input-group mb-3">
        <span class="input-group-text">密&emsp;码</span>
        <input type="text" v-model="login_info.password" class="form-control" />
      </div>
    </template>
    <template v-slot:footer>
      <a class="btn btn-primary cs-width-10-10 cs-link" @click="login">登录</a>
    </template>
  </CsModal>
</template>

<script>
import CsModal from "./CsModal.vue";

export default {
  name: "LayoutLint",
  components: {
    CsModal,
  },
  data() {
    return {
      modal_data: {
        id: "login",
        title: "登录",
      },
      login_info: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    navJump(path) {
      this.$router.push(path);
    },
    login() {
      this.$makeRequest("/api/app01/login/", "post").then(() => {});
    },
  },
};
</script>

<style scoped lang="scss"></style>
